<script setup>

import axios from "axios";
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import router from "@/router/index.js";
const route = new useRoute();
const showAllReplies = ref(false); // 默认不展开全部回复
const comment = reactive({
  getAll: {
    all: [],
  },
});

function CommentAll() {
  axios
      .get("http://127.0.0.1:8081/comment/getAll")
      .then((res) => {
        comment.getAll.all = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
}
onMounted(() => {
  CommentAll();
});

const comments = reactive({
  getAll: {
    all: [],
  },
  getList: {
    qaq: [],
  },
});
function CommentsList() {
  axios
      .get("http://127.0.0.1:8081/comments/getList")
      .then((res) => {
        console.log(comment.getAll.all);
        comments.getAll.all = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
}
onMounted(() => {
  CommentsList();
});
function CommentsAll() {
  axios
      .post("http://127.0.0.1:8081/comments/getAll")
      .then((res) => {
        comments.getList.qaq = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
}
onMounted(() => {
  CommentsAll();
});

const article = reactive({
  getAll: {
    id: route.params.id,
    title: "",
    content: "",
    classificationID: null,
    topic: null,
    name: "", // 作者名
    count: null,
    like: null,
    collect: null,
  },
});
function Articel() {

  console.log(route.params.id)
  axios.get(`http://127.0.0.1:8081/art/getAll/${article.getAll.id}`,{
    headers:{
      token:'detail'
    }
  }).then(res=>{
    article.getAll=res.data
  })
      .catch(err => {
        console.log(err);

      });
}
onMounted(() => {
  Articel();
});

const defaultPlaceholder = "参与讨论";
const inputValue = ref("");
const placeholderText = ref(defaultPlaceholder);

const clearPlaceholder = () => {
  if (inputValue.value === "") {
    placeholderText.value = "";
  }
};

const restorePlaceholder = () => {
  if (inputValue.value === "") {
    placeholderText.value = defaultPlaceholder;
  }
};
const commentadd=reactive({
  add:{
    content: '',
    id: 1
  }
})
function  add(){
  axios.post("http://127.0.0.1:8081/comment/add",commentadd.add)
      .then(res => {
        if (res.data) {
        } else {
          alert("评论成功"); // 使用 alert 提示用户
          CommentAll();
          commentadd.add.content=""
        }
      })
      .catch(err => {
        console.log(err);
        alert("网络异常"); // 使用 alert 提示用户
      });
}const imgUrl=ref("../")
</script>

<template>
  <div class="home">

    <div v-for="item in comment.getAll.all" :key="item.id">
      <div class="pj">
        <div class="pinlun">
          <div class="circle2">
            <img :src="`${imgUrl}${item.userAvatar}`" width="60" height="60"/>
          </div>
          <div class="container">
            <p>{{ item.name }}</p>
            <div class="lv8"><p>Lv.7</p></div>
          </div>
        </div>
        <div class="dianzan">
          <img src="../images/点赞_块.png" height="32" width="32"/>
          <p>{{ item.like }}</p>
        </div>
      </div>
      <div class="plneirong">
        <p>{{ item.content }}</p>
      </div>
      <div class="huifu">
        <!-- 显示前两条回复 -->
        <div class="huifu2" v-for="(comments, index) in comments.getAll.all.slice(0, showAllReplies ? comments.getAll.all.length : 2)" :key="comments.id">
          <p>{{ comments.name }} 回复 {{ item.name }}: {{ comments.content }}</p>
        </div>
        <!-- 如果回复数量大于2，显示“全部回复”按钮 -->
        <div class="quanbu" v-if="comments.getAll.all.length > 2" @click="showAllReplies = !showAllReplies">
          <img src="../images/小三角.png" height="16" width="16"/>
          <p>{{ showAllReplies ? '收起回复' : '全部回复' }}</p>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>



ul {
  list-style: none;
}

* {
  margin: 0;
  padding: 0;
}

.pj {
  display: flex;
  justify-content: space-between;
}

.quanbu {
  display: flex;
  justify-content: center;
  align-items: center;
}

.huifu {
  background-color: #f5f5f5;
  width: 100%;
  height: auto;
  margin-left: 10px;
}

.huifu2 p {
  padding: 10px;
  margin-left: 10px;
}

.image-container img {
  width: 100%;
  height: auto;
}

.container {
  display: flex;
  padding: 10px;
  margin-top: -10px;
  align-items: center;
}

.lv7 {
  margin-left: 10px;
  background-color: #3498db;
  width: 40px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lv7 p {
  color: white;
}

.guanzhu p {
  color: white;
}


.biaoqian p {
  color: #6d92b1;
  margin-left: 5px;
}

.pinlun {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.circle2 {
  width: 50px;
  height: 50px;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensures the image doesn't overflow */
  border-radius: 50%
}


.circle2 img {
  max-width: 100%;
  max-height: 100%;
}

.lv8 {
  margin-left: 10px;
  background-color: #3498db;
  width: 30px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lv8 p {
  color: white;
}

.dianzan {
  display: flex;
  margin: 5px;
  align-items: center;
  justify-content: center;
}

.plneirong {
  margin-top: 15px;
  margin-left: 10px;
}

.plneirong p {
  margin-top: -10px;
}

.plk input {
  margin-top: 10px;
  font-size: 1rem;
  height: 30px;
  border-radius: 5px;
  width: 200px;
}
</style>